<template>
  <div class="time-line">
    <div class="set-item">
      <div class="title">数据映射</div>
      <div class="body">
        <el-table :data="dimensionsAndSource" border>
          <el-table-column prop="field" label="字段" show-overflow-tooltip />
          <el-table-column prop="mapping" label="映射" show-overflow-tooltip />
          <el-table-column prop="result" label="状态" show-overflow-tooltip>
            <template #default="{ row }">
              <div>
                <el-tag type="success" v-if="row.result == 0">无</el-tag>
                <el-tag type="success" v-else-if="row.result == 1">成功</el-tag>
                <el-tag type="danger" v-else="row.result == 2">失败</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="set-item" v-if="ajax">
      <div class="title">数据过滤</div>
      <div class="body">
        <div class="tip">过滤器默认处理接口返回值的「data」字段</div>
        <DataFilter />
      </div>
    </div>
    <div class="set-item">
      <div class="title">数据内容</div>
      <div class="body">
        <!-- <div class="btns">
          <el-upload
            class="upload-demo"
            :limit="1"
            :on-change="handleupload"
            :auto-upload="false"
            accept=".json"
          >
            <div type="primary" class="btn">导入（json/txt）</div>
            <template #tip> </template>
          </el-upload>
          <div type="primary" class="btn" @click="download">下 载</div>
        </div> -->
        <div class="data">
          <el-input
            v-model="detailInfo"
            :rows="14"
            readonly
            resize="none"
            type="textarea"
            class="inp-code"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue"
import DataFilter from "./dataFilter.vue"
import { useStore } from "vuex"
import {
  formartJsonStr,
  downloadTextFile,
  JSONStringify,
} from "../../../../../../utils/index.js"
let store = useStore()
const props = defineProps({
  show: {
    type: Boolean,
    required: false,
  },
  ajax: {
    type: Boolean,
    required: true,
  },
})
let source = ref()
let dimensions = ref()
let dimensionsAndSource = ref([])

let selectedComponent = computed(() => {
  return store.state.chartEditStore.selectedComponent
})
let isCharts = computed(() => {
  return selectedComponent.value.chartConfig.chartFrame === "echarts"
})
let filterShow = computed(() => {
  return selectedComponent.value.request.requestDataType !== "static"
})
let detailInfo = computed(() => {
  return formartJsonStr(
    JSON.stringify(selectedComponent.value?.option?.dataset ?? {})
  )
})

watch(
  () => selectedComponent.value?.option?.dataset,
  newData => {
    if (newData && isCharts.value) {
      // 只有 DataSet 数据才有对应的格式
      source.value = newData
      if (isCharts.value) {
        dimensions.value = newData.dimensions
        dimensionsAndSource.value = dimensionsAndSourceHandle()
      }
    } else if (newData !== undefined && newData !== null) {
      dimensionsAndSource.value = null
      source.value = newData
    } else {
      // noData.value = true
      source.value = "此组件无数据源"
    }
    if (Array.isArray(newData)) {
      dimensionsAndSource.value = null
    }
  },
  {
    immediate: true,
  }
)

function dimensionsAndSourceHandle() {
  try {
    // 去除首项数据轴标识
    return dimensions.value.map((dimensionsItem, index) => {
      return index === 0
        ? {
            // 字段
            field: "通用标识",
            // 映射
            mapping: dimensionsItem,
            // 结果
            result: 0,
          }
        : {
            field: `数据项-${index}`,
            mapping: dimensionsItem,
            result: matchingHandle(dimensionsItem),
          }
    })
  } catch (error) {
    return []
  }
}

function matchingHandle(mapping) {
  let res = 1
  for (let i = 0; i < source.value.length; i++) {
    if (source.value[i][mapping] === undefined) {
      res = 2
      return res
    }
  }
  return 1
}

// function download() {
//   downloadTextFile(
//     JSONStringify(selectedComponent.value.option.dataset),
//     undefined,
//     "json"
//   )
// }

// function handleupload(a, b) {
// }
</script>

<style lang="scss" scoped>
.time-line {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-bottom: 10px;
  .set-item {
    .title {
      width: 80px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
    .body {
      .btns {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 40px;
        .btn {
          min-width: 100px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          background: #d9d9d9;
          cursor: pointer;
          border-radius: 5px;
          padding: 0 10px;
        }
      }
      .data {
        :deep(.el-textarea__inner) {
          background: #d9d9d9 !important;
          color: #000 !important;
        }
      }
      .tip {
        line-height: 30px;
        font-size: 12px;
        color: #797979;
      }
    }
  }
}
.el-timeline-item__wrapper .el-tag--light {
  min-width: 40px;
}
.el-table {
  font-size: 14px;
}
</style>
<style lang="scss"></style>
